<template>
  <el-container direction="vertical" style="padding: 10px">
    <el-form size="mini">
      <el-form-item label="模块名称">
        <el-input v-model="formData.moduleName"></el-input>
      </el-form-item>
      <el-form-item label="模块内容">
        <el-input v-model="formData.moduleContent"></el-input>
      </el-form-item>
      <el-form-item label="选择可见角色">
        <el-checkbox-group v-model="formData.roleModuleList">
          <el-checkbox v-for="item in roleList" :label="item.id">{{getRoleName(item)}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addModule">新增</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  export default {
    name: "index",
    data: function () {
      return {
        formData: {
          moduleName: null,
          moduleContent: null,
          roleModuleList: [],
        },
        roleList: [],
      }
    },
    computed: {

    },
    created() {
      this.getRoleList();
    },
    methods: {
      addModule() {
        console.log(this.formData)
        this.$api.moduleAdd(this.formData).then(res => {
          // 请求结束要触发的动作
        })
      },
      getRoleList() {
        this.$api.roleList().then(res =>{
          this.roleList = res;
        })
      },
      getRoleName(item) {
        let _ = "";
        if (item.medicalType == null || item.medicalType == "") {
          _ = "";
        } else {
          _ = "-" + item.medicalType;
        }
        return item.roleType + _;
      }
    }
  }
</script>

<style scoped>

</style>
